<template>
  <a-card>
    <a-form :model="assign" layout="vertical">
      <a-form-item field="assignStrategy" label="审批人设置">
        <a-radio-group v-model="assign.assignStrategy" @change="strategyChange">
          <template v-for="item in ASSIGN_STRATEGY" :key="item.value">
            <a-radio :value="item.value">
              {{ item.label }}
            </a-radio>
          </template>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="assign.assignStrategy !== 'START_USER'" field="assignValue" label="">
        <user-select
          v-if="assign.assignStrategy === 'SELECT_USER'"
          v-model="assign.assignValue"
        />
        <role-select
          v-if="assign.assignStrategy === 'SELECT_ROLE'"
          v-model="assign.assignValue"
        />
        <dept-select
          v-if="assign.assignStrategy === 'SELECT_DEPT' || assign.assignStrategy === 'SELECT_DEPT_LEADER'"
          v-model="assign.assignValue"
        />
        <post-select
          v-if="assign.assignStrategy === 'SELECT_POST'"
          v-model="assign.assignValue"
        />
      </a-form-item>
      <a-form-item field="assignEmpty" label="审批人为空">
        <a-radio-group v-model="assign.assignEmpty" type="button">
          <a-radio value="1">通过</a-radio>
          <a-radio value="2">拒绝</a-radio>
          <a-radio value="3">转交管理员</a-radio>
          <a-radio value="4">转给指定人员</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="assign.assignEmpty === '4'" field="assignEmptyUser" label="">
        <user-select
          v-model="assign.assignEmptyUser"
          :multiple="false"
        />
      </a-form-item>
      <a-form-item field="assignMultiStrategy" label="多人审批策略">
        <a-radio-group v-model="assign.assignMultiStrategy" type="button">
          <a-radio value="1">会签</a-radio>
          <a-radio value="2">或签</a-radio>
          <a-radio value="3">依次审批</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="assign.assignMultiStrategy === '1'" field="assignMultiPercentage" label="会签通过百分比">
        <a-input-number v-model="assign.assignMultiPercentage" :min="1" :max="100">
          <template #suffix>
            <div>%</div>
          </template>
        </a-input-number>
      </a-form-item>
      <a-form-item field="assignRefuse" label="审批拒绝策略">
        <a-radio-group v-model="assign.assignRefuse" type="button" @change="assignRefuseChange">
          <a-radio value="1">结束流程</a-radio>
          <a-radio value="2" :disabled="!cellsPre || cellsPre.length <=0">
            驳回到节点
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="assign.assignRefuse === '2'" field="assignRefuse" label="驳回节点">
        <a-select v-model="assign.assignRefuseNode" allow-clear placeholder="请选择">
          <a-option
            v-for="item of cellsPre"
            :key="item.id"
            :value="item.id"
            :tag-props="{color: 'blue'}"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, defineModel, defineProps, onMounted } from 'vue';
import { detailForm } from '@/api/system/form';
import { ASSIGN_STRATEGY } from '@/components/bpmn-design/config/config';
import UserSelect from '@/components/business-select/user-select.vue';
import RoleSelect from '@/components/business-select/role-select.vue';
import DeptSelect from '@/components/business-select/dept-select.vue';
import PostSelect from '@/components/business-select/post-select.vue';

const assign = defineModel({ type: Object });

const props = defineProps({
  formId: {
    type: String,
    default: () => {
      return '';
    }
  },
  cellsPre: {
    type: [],
    default: () => {
      return [];
    }
  }
});

const formItem = ref([]);

const strategyChange = () => {
  assign.value.assignValue = [];
};

const assignRefuseChange = () => {
  assign.value.assignRefuseNode = undefined;
};

onMounted(() => {
  detailForm(props.formId).then(res => {
    formItem.value = res.data.formItem;
  });
});

</script>

<script lang="ts">
export default {
  name: 'ConfigAudit'
};
</script>

<style scoped lang="less">

</style>